<script setup>
import { listUser } from '@/api/system/user.js'
const userList = ref([])
const getUser = async () => {
  const res = await listUser({ pageNum: 1, pageSize: 999 })
  console.log(res.rows, 'res')
  userList.value = res.rows.map(item => ({
    label: item.nickName, //nickName
    value: item.userId
  }))
}
getUser()
const { proxy } = getCurrentInstance()

// 封装 方法 字典查询
const {
  customer_level, // 等级
  customer_affiliated_organization //所属机构
} = proxy.useDict('customer_level', 'customer_affiliated_organization')

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: {}
  },
  // 是否为审核
  examine: {
    type: Boolean,
    default: false
  },
  // 是否显示关结
  reviewComments: {
    type: Boolean,
    default: false
  }
})

const ruleFormRef = ref(null)
const ruleForm = reactive({
  affiliatedOrganization: '', // 所属机构
  customerName: '', // 客户名称
  customerAbbreviation: '', // 客户简称
  customerLevel: '', // 客户等级
  customerAddress: '', // 客户地址
  contactsBy: '', // 联系人
  contactsInformation: '', // 联系方式
  ascriptionBy: '', // 归属人
  remark: '' // 备注
})

// 校验枚举
const checkAge = (rule, value, callback) => {
  // console.log(!/[A-Z]/.test(value))
  if (!(/[A-Z]/.test(value) && value.length === 4)) return callback(new Error('只能为4位大写字母'))
  callback()
}

const rules = reactive({
  affiliatedOrganization: [{ required: true, message: '请选择所属机构', trigger: 'change' }],
  customerName: [{ required: true, message: '请填写客户名称', trigger: 'blur' }],
  customerAbbreviation: [
    { required: true, message: '请填写客户简称', trigger: 'blur' },
    { validator: checkAge, trigger: 'blur' }
  ],
  customerLevel: [{ required: true, message: '请选择客户等级', trigger: 'change' }],
  customerAddress: [{ required: true, message: '请选择客户地址', trigger: 'change' }],
  reviewComments: [{ required: true, message: '请填写审核意见', trigger: 'blur' }]
  // contactsInformation: [{ required: true, message: '请填写联系方式', trigger: 'blur' }],
  // ascriptionBy: [{ required: true, message: '请选择归属人', trigger: 'change' }]
  // businessLicense: [{ required: true, message: '请上传开票信息', trigger: 'change' }],
  // invoicingInformation: [{ required: true, message: '请上传营业执照', trigger: 'change' }]
})

// 回显
if (props.data) {
  for (let Key in props.data) {
    ruleForm[Key] = props.data[Key]
  }
  // ruleForm.ascriptionBy = Number(props.data.ascriptionBy)
}

const submit = async () => {
  const valid = await ruleFormRef.value.validate()
  if (!valid) return
  return new Promise(async (resolve, reject) => {
    if (!valid) return reject(false)
    resolve(ruleForm)
  })
}

defineExpose({ submit })
</script>

<template>
  <el-form
    ref="ruleFormRef"
    class="demo-ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    label-position="right"
    status-icon
  >
    <div class="box">
      <div class="left">
        <div style="width: 60%">
          <!-- <el-form-item label="所属机构" prop="affiliatedOrganization">
            <el-select
              v-model="ruleForm.affiliatedOrganization"
              clearable
              :disabled="props.disabled"
              placeholder="请选择所属机构"
            >
              <el-option
                v-for="(item, index) in customer_affiliated_organization"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->

          <el-form-item label="客户名称" prop="customerName">
            <el-input
              clearable
              :disabled="props.disabled"
              v-model="ruleForm.customerName"
              placeholder="请填写客户名称"
            />
          </el-form-item>
          <el-form-item label="客户简称" prop="customerAbbreviation">
            <el-input
              clearable
              :disabled="props.disabled"
              v-model="ruleForm.customerAbbreviation"
              placeholder="请填写客户简称"
            />
          </el-form-item>
          <el-form-item label="客户等级" prop="customerLevel">
            <el-select
              v-model="ruleForm.customerLevel"
              clearable
              :disabled="props.disabled"
              placeholder="请选择客户等级"
            >
              <el-option v-for="(item, index) in customer_level" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="客户地址">
            <el-input
              clearable
              :disabled="props.disabled"
              v-model="ruleForm.customerAddress"
              placeholder="请填写客户地址"
            />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input clearable :disabled="props.disabled" v-model="ruleForm.contactsBy" placeholder="请填写联系人" />
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input
              clearable
              :disabled="props.disabled"
              v-model="ruleForm.contactsInformation"
              placeholder="请填写联系方式"
            />
          </el-form-item>
          <el-form-item label="归属人" prop="ascriptionBy">
            <el-select
              filterable
              v-model="ruleForm.ascriptionBy"
              clearable
              :disabled="props.disabled"
              placeholder="请选择归属人"
            >
              <el-option v-for="(item, index) in userList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="right">
        <el-form-item label="开票信息" prop="invoicingInformation">
          <ImageUpload v-model="ruleForm.invoicingInformation" v-if="!props.disabled" />
          <ImagePreview width="146px" height="146px" :src="ruleForm.invoicingInformation" v-else />
        </el-form-item>
        <el-form-item label="营业执照" prop="businessLicense">
          <ImageUpload v-model="ruleForm.businessLicense" v-if="!props.disabled" />
          <ImagePreview width="146px" height="146px" :src="ruleForm.businessLicense" v-else />
        </el-form-item>
      </div>
    </div>
    <div class="rk">
      <el-form-item label="备注" prop="remark">
        <el-input
          :disabled="props.disabled"
          clearable
          v-model="ruleForm.remark"
          :rows="3"
          type="textarea"
          placeholder="请输入备注"
        />
      </el-form-item>
    </div>

    <div class="rk">
      <el-form-item label="审核意见" prop="reviewComments" v-if="props.examine">
        <el-input clearable v-model="ruleForm.reviewComments" :rows="2" type="textarea" placeholder="请输入审核意见" />
      </el-form-item>
    </div>
  </el-form>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  display: flex;
  justify-content: center;
  .right {
    flex: 1;
  }
  .left {
    flex: 1;
    display: flex;
    justify-content: center;
  }
}

.rk ::v-deep .el-form-item {
  width: 100% !important;
}

.box ::v-deep .el-input__inner {
  width: 178px !important;
}

.box ::v-deep .el-form-item__content {
  width: 178px !important;
}
</style>
